<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="商家名称">
              <el-select size="small" style="width: 100%;" v-model="searchObject.shopId" filterable clearable
                placeholder="请选择">
                <el-option v-for="item in shopOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="属性名称">
              <el-input v-model="searchObject.name" size="small" placeholder="属性名称" name="name">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="padding: 0 10px;margin-top: 5px;">
            <el-row type="flex" justify="end">
              <el-button size="small" type="primary" @click="search">搜索</el-button>
              <el-button size="small" plain @click="clearData">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <div class="tool-add">
        <el-button type="primary" size="small" @click="addView">新增</el-button>
      </div>

      <el-table v-loading="loading" :data="tableData.list" @sort-change="changeTableSort"
        style="width: 100%;font-size: 12px;">
        <el-table-column label="商家名称" prop="shopName" width="200">
        </el-table-column>
        <el-table-column label="属性名称" prop="name" width="150">
        </el-table-column>
        <el-table-column label="属性值" prop="attrs">
        </el-table-column>
        <el-table-column width="180" align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" icon="el-icon-info" @click="show(scope.row)">详情
            </el-button>

            <el-button type="text" size="mini" icon="el-icon-edit" @click="editView(scope.row)">编辑
            </el-button>

            <el-button type="text" icon="el-icon-delete" class="danger" size="mini" style="cursor: pointer;"
              @click="deleteData(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
          :page-size="tableData.size" :pager-count="5" layout="total, sizes, prev, pager, next, jumper"
          :page-count="tableData.totalPage" :total="tableData.total" @size-change="sizeChange"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";

  export default {
    name: "dish_home",
    mixins: [common],
    data() {
      return {
        searchObject: {
          no: 1,
          size: 10,
          name: "",
        },
        shopOptions: [],
        dialogVisible: false,
        defaultProps: {
          children: "children",
          label: "name",
        },
        loading: false,
        tableData: {},
        activeIndex: "1",
      };
    },
    methods: {
      addView() {
        this.$router.push({
          path: "/dishattr/add",
        });
      },
      editView(row) {
        var data = {};
        data.id = row.id;
        this.$router.push({
          path: "update",
          query: data,
        });
      },
      handleSelect(event) {
        if (event === "1") {
          this.searchObject.orderState = "";
        } else {
          this.searchObject.orderState = event;
        }
        this.getSearchList();
      },
      async getSearchList() {
        this.loading = true;
        var data = this.searchObject,
          that = this;
        this.postData("/tenantRest/dishattr/search.htm", data, function (result) {
          if (result.code == 0) {
            that.tableData = result;
          }
          setTimeout(function () {
            that.loading = false;
          }, 300);
        });
      },
      sizeChange(event) {
        this.searchObject.size = event;
        this.getSearchList();
      },
      pageChange(index) {
        this.searchObject.no = index;
        this.getSearchList();
      },
      search() {
        this.searchObject.no = 1;
        this.getSearchList();
      },
      clearData() {
        this.searchObject.shop = "";
        this.searchObject.name = "";
      },
      show(row) {
        var param = {};
        param.id = row.id;
        this.$router.push({
          path: "/dishattr/view",
          query: param,
        });
      },
      changeTableSort(column) {
        this.searchObject.sortField = column.prop;
        if ("descending" == column.order) {
          this.searchObject.sortMethod = "desc";
        } else if ("ascending" == column.order) {
          this.searchObject.sortMethod = "asc";
        } else {
          this.searchObject.sortMethod = "";
        }
        this.getSearchList();
      },
      deleteData(event) {
        this.selectId = event.id;
        this.dialogVisible = true;
      },
      handleClose() {
        this.dialogVisible = false;
        var self = this;
        if (self.selectId) {
          var params = {};
          params.id = self.selectId;
          this.postData("/tenantRest/dishattr/delete.htm", params, function (res) {
            if (res.code == 0) {
              self.$message({
                message: '删除数据成功',
                type: 'success'
              });
              self.getSearchList();
            } else {
              self.$message.error(res.msg);
            }
          });
        }

      },
    },
    mounted() {
      this.getSearchList();
      this.getShopList();
    },
  };
</script>

<style>
  .model-content {
    margin-top: 20px;
  }

  /* 搜索 */
  .search {
    background-color: #fff;
    padding: 10px 0px;
    box-sizing: border-box;
    border-radius: 1px;
    margin-bottom: 10px;
  }

  .data-content {
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    padding: 10px;
    width: 100%;
  }

  .tool-add {
    padding: 0px;
    text-align: left;
  }
</style>